<template>
  <div class="edit-box" teleport="body">
    <h1>编辑账号</h1>
    <el-form
    
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="账户账号" prop="admin">
      <el-input v-model="ruleForm.admin" autocomplete="off"  />
    </el-form-item>
    
    <el-form-item label="账号类型">
      <el-radio-group v-model="ruleForm.status">
        <el-radio  label="集团账号" />
        <el-radio  label="项目账号" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="关联员工" prop="renyuan">
      <el-input
      v-model="ruleForm.renyuan"
      
      
      
    />
    </el-form-item>
    <el-form-item label="联系手机" prop="phone">
      <el-input v-model.number="ruleForm.phone"  />
    </el-form-item>
    
      <hr/>
    
  </el-form>
  
      <span class="dialog-footer">
        <el-button type="primary" @click="saveFn" >保存</el-button>
        <el-button @click="cancelFn">
          取消
        </el-button>
      </span>
    
  </div>
</template>

<script setup lang="ts">
import service from '../../../utils/service'
import {  reactive, ref,watch } from 'vue';
import { ElMessage } from 'element-plus';

// 声明属性
const props = defineProps<{
  id:number
    admin:string
}>()

// 声明事件
const emit = defineEmits<{
    (e:"hide"):void;
    (e:"updatesuccess"):void
}>();

interface IForm{
  "admin":string,
  "password":string,
  "renyuan":string,
  "status":1,
  "phone":number,
  
}
//当前人员的数据
const ruleForm = reactive<IForm>({

  "admin": "",
  "password":"",
  "status":1,
  "renyuan":"",
  "phone":1
})

const cancelFn = ()=>{
    //触发隐藏事件
    emit("hide")
}
const getAdminDetail = ()=>{
  service({
    url:'accountlistu',
    params:{
      admin:props.admin
    }
  }).then(res=>{
    // if(res.data.code === "200"){
      ruleForm.admin = res.data[0].admin;
      ruleForm.status = res.data[0].status;
      ruleForm.renyuan = res.data[0].renyuan;
      ruleForm.phone = res.data[0].phone;
      
      
    // }
  })
}

watch(props,()=>{
  getAdminDetail();
  // ruleForm.
},{
  deep:true
})
//编辑
const saveFn =()=>{
  service({
    url:"accountlistu/"+props.id,
    method:"patch",
    data:{
      admin:ruleForm.admin,
      status:ruleForm.status,
      renyuan:ruleForm.renyuan,
      phone:ruleForm.phone
    }
  }).then((res)=>{
    // if(res.data.code==="200"){
      ElMessage({
        message:"编辑成功",
        type:"success"
      });
      emit("hide")//关闭编辑窗口;
      emit("updatesuccess")

    // }
  })
}
</script>

<style scoped>
.edit-box{
    width:500px;
    height:300px;
    border:1px solid #e5e4e4;
    position: fixed;
    left: 35%;
    top: 40%;
    background-color: #ededed;
    z-index: 9999;
}
.edit-box .dialog-footer{
    position: absolute;
    left: 350px;
    top:250px;
}
</style>